<template>
    <div class="l-auto-window" style="padding:8px;padding-bottom:0;" >
        <el-tabs v-model="activeName" type="card" >
            <el-tab-pane label="基础信息" name="base">
                <div class="l-from-body" >
                    <el-form :model="formData" :rules="rules" size="mini"  ref="form" label-width="60px" >
                        <el-col :span="24">
                            <el-form-item label="名称" prop="f_Name">
                                <el-input v-model="formData.f_Name"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="图标" prop="f_Icon">
                                <l-input-icon onlyFirst v-model="formData.f_Icon" >
                                </l-input-icon>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="颜色"  prop="f_Color" >
                                <l-input-color v-model="formData.f_Color"
                                        placeholder="请输入"></l-input-color>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="分类" prop="f_Type">
                                <el-select v-model="formData.f_Type" placeholder="请选择分类">
                                    <el-option
                                    v-for="item in lr_dataItem['function']"
                                    :key="item.f_ItemValue"
                                    :label="item.f_ItemName"
                                    :value="item.f_ItemValue">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="排序" prop="f_SortCode">
                                <el-input-number v-model="formData.f_SortCode"  controls-position="right" :min="1" ></el-input-number>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="地址" prop="f_Url">
                                <el-input v-model="formData.f_Url"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="状态" >
                                <el-switch
                                :active-value="1"
                                :inactive-value="0"
                                v-model="formData.f_EnabledMark"
                                >
                                </el-switch>
                            </el-form-item>
                        </el-col>
                    </el-form>
                </div>
            </el-tab-pane>
            <el-tab-pane label="按钮信息" name="btninfo">
                <div class="l-from-table-body" >
                    <l-edit-table
                        addBtnText="添加按钮"
                        :dataSource="formButtons"

                        @addRow="handleAddButton"
                        @deleteRow="handleDeleteButton"
                        >
                        <el-table-column
                        prop="f_FullName"
                        label="名称"
                        minWidth="100">
                            <template slot-scope="scope">
                                <el-input size="mini" v-model="scope.row.f_Name" placeholder="请输入" ></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column
                        prop="f_EnCode"
                        label="编号"
                        minWidth="100">
                            <template slot-scope="scope">
                                <el-input size="mini" v-model="scope.row.f_Code" placeholder="请输入"></el-input>
                            </template>
                        </el-table-column>
                    </l-edit-table >
                </div>
            </el-tab-pane>
            <el-tab-pane label="列表信息" name="colinfo">
                <div class="l-from-table-body" >
                    <l-edit-table
                        addBtnText="添加列表字段"
                        :dataSource="formColumns"

                        @addRow="handleAddColumns"
                        @deleteRow="handleDeleteColumns"
                        >
                        <el-table-column
                        prop="f_FullName"
                        label="名称"
                        minWidth="100">
                            <template slot-scope="scope">
                                <el-input size="mini" v-model="scope.row.f_Name" placeholder="请输入" ></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column
                        prop="f_EnCode"
                        label="编号"
                        minWidth="100">
                            <template slot-scope="scope">
                                <el-input size="mini" v-model="scope.row.f_Code" placeholder="请输入"></el-input>
                            </template>
                        </el-table-column>
                    </l-edit-table >
                </div>
            </el-tab-pane>
            <el-tab-pane label="表单信息" name="forminfo">
                <div class="l-from-table-body" >
                    <l-edit-table
                        addBtnText="添加表单字段"
                        :dataSource="formForms"

                        @addRow="handleAddForms"
                        @deleteRow="handleDeleteForms"
                        >
                        <el-table-column
                        prop="f_FullName"
                        label="名称"
                        minWidth="100">
                            <template slot-scope="scope">
                                <el-input size="mini" v-model="scope.row.f_Name" placeholder="请输入" ></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column
                        prop="f_EnCode"
                        label="编号"
                        minWidth="100">
                            <template slot-scope="scope">
                                <el-input size="mini" v-model="scope.row.f_Code" placeholder="请输入"></el-input>
                            </template>
                        </el-table-column>
                    </l-edit-table >
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
export default {
    props:{
    },
    data(){
        return {
            activeName:'base',
            formData:{
                f_Name: '',
                f_Type: '',
                f_Icon: 'learun-icon-stars',
                f_Color:'#3c9cff',
                f_EnabledMark:1,
                f_SortCode: '',
                f_Url: '',
                f_IsSystem:1
            },
            rules: {
                f_Name: [
                    { required: true, message: '请输入名称' }
                ],
                f_Icon: [
                    { required: true, message: '请选择图标' }
                ],
                f_Color: [
                    { required: true, message: '请选择颜色',trigger: 'blur' }
                ],
                f_Type: [
                    { required: true, message: '请选择分类' }
                ],
                f_Url: [
                    { required: true, message: '请输入地址' }
                ]
            },
            formButtons:[],
            formColumns:[],
            formForms:[]
        };
    },
    computed:{
    },
    methods:{
        // 重置表单
        resetForm(){
            this.activeName = 'base';
           
            this.$refs.form && this.$refs.form.resetFields()
            this.formButtons = []
            this.formColumns = []
            this.formForms = []
        },
        // 校验表单
        validateForm(callback){
            this.$refs.form.validate((valid) => {
                if(valid){
                    callback();
                }
            })
        },
        // 设置表单数据
        setForm(data){
            this.formData = this.$deepClone(data.functionEntity)
            const moduleItemEntitys = data.moduleItemEntitys || []
            this.formButtons = moduleItemEntitys.filter(t=>t.f_Type == 1)
            this.formColumns = moduleItemEntitys.filter(t=>t.f_Type == 2)
            this.formForms = moduleItemEntitys.filter(t=>t.f_Type == 3)
        },
        // 获取表单数据
        getForm(){

            const moduleItemEntitys = []

            moduleItemEntitys.push(...this.formButtons.filter(t=>t.f_Name && t.f_Code))
            moduleItemEntitys.push(...this.formColumns.filter(t=>t.f_Name && t.f_Code))
            moduleItemEntitys.push(...this.formForms.filter(t=>t.f_Name && t.f_Code))
            const postData = {
                functionEntity:this.$deepClone(this.formData),
                moduleItemEntitys
            }

            return postData
        },

        // 按钮
        handleAddButton(){
            this.formButtons.push({f_Name:'',f_Code:'',f_Type:1})
        },
        handleDeleteButton(data){
            this.formButtons.splice(data.index,1)
        },

        // 列表
        handleAddColumns(){
            this.formColumns.push({f_Name:'',f_Code:'',f_Type:2})
        },
        handleDeleteColumns(data){
            this.formColumns.splice(data.index,1)
        },

        // 表单
        handleAddForms(){
            this.formForms.push({f_Name:'',f_Code:'',f_Type:3})
        },
        handleDeleteForms(data){
            this.formForms.splice(data.index,1)
        }
    }
}
</script>